<template>
    <div class="bill-container">
        <TopNav title="榜单"></TopNav>

        <div class="bill-list">
            <dl class="bill-item">
                <dt class="top dis-flex">
                    <div class="cover">
                        <img class="c-img" src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100">
                        <a href="#" class="msk" title="云音乐飙升榜"></a>
                    </div>
                    <div class="t-left">
                        <a href="#" class="title" title="">云音乐飙升榜</a>
                        <div class="btns">
                            <a href="javascript:void(0);" class="play-btn">播放</a>
                            <a href="javascript:void(0);" class="collect-btn">收藏</a>
                        </div>
                    </div>
                </dt>
                <dd>
                    <ol>
                        <li>
                            <span class="no">1</span>
                            <a href="#" class="name" title="">想见你想见你想见你</a>
                            <div class="oper">
                                <a href="javascript:void(0);" title="播放" class="play-btn">播放</a>
                                <a href="javascript:void(0);" title="添加到播放列表" class="add-btn">添加到播放列表</a>
                                <a href="javascript:void(0);" title="收藏" class="collect-btn">收藏</a>
                            </div>
                        </li>
                        
                        <li>
                            <span class="no">1</span>
                            <a href="#" class="name" title="">想见你想见你想见你</a>
                            <div class="oper">
                                <a href="javascript:void(0);" title="播放" class="play-btn">播放</a>
                                <a href="javascript:void(0);" title="添加到播放列表" class="add-btn">添加到播放列表</a>
                                <a href="javascript:void(0);" title="收藏" class="collect-btn">收藏</a>
                            </div>
                        </li>
                        
                        <li>
                            <span class="no">1</span>
                            <a href="#" class="name" title="">想见你想见你想见你</a>
                            <div class="oper">
                                <a href="javascript:void(0);" title="播放" class="play-btn">播放</a>
                                <a href="javascript:void(0);" title="添加到播放列表" class="add-btn">添加到播放列表</a>
                                <a href="javascript:void(0);" title="收藏" class="collect-btn">收藏</a>
                            </div>
                        </li>
                    </ol>
                </dd>
            </dl>
        </div>
    </div>
</template>
<script>
import TopNav from "./top-nav";
 
export default {
    name: 'billboard',

    components: {
        TopNav
    }
}
</script>
<style lang="scss" scoped>
    $bill_bg: url(../../assets/images/index/index_bill.png) no-repeat;

    .bill-container{

    }
    
    .bill-list{
        height: 472px;
        padding-left: 1px;
        margin-top: 20px;
        background: $bill_bg;

        .top{
            height: 100px;
            padding: 20px 0 0 19px;
        }
    }
</style>
